import { Card, Space, Table, Tag, Button, Checkbox, Form, Input } from 'antd'
import PageHeaderWrapper from '@/components/pageHeaderWrapper'
import './style.less'
import { getUserList } from '@/api/user.js'

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address'
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: (_, { tags }) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? 'geekblue' : 'green'
          if (tag === 'loser') {
            color = 'volcano'
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          )
        })}
      </>
    )
  },
  {
    title: 'Action',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <a>Invite {record.name}</a>
        <a>Delete</a>
      </Space>
    )
  }
]

function User() {
  let [data, setData] = useState([])
  let [loading, setLoading] = useState(false)

  const onFinish = (values) => {
    console.log('Success:', values)
  }
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }
  useEffect(() => {
    // 模拟获取用户信息
    console.log('User component mounted')
    fetchUserList()
  }, [])

  let fetchUserList = () => {
    setLoading(true)
    setTimeout(() => {
      getUserList().then((res) => {
        console.log('Fetched user data:', res)
        setData(res)
        setLoading(false)
      })
    }, 1000)
  }

  const pushUserInfo = () => {
    data.push({
      key: '4',
      name: 'Joe Black11',
      age: 32,
      address: 'Sydney No. 1 Lake Park',
      tags: ['cool', 'teacher']
    })
    setData([...data])
  }

  return (
    <>
      <PageHeaderWrapper title="用户管理" subtitle="(副标题)" />
      <section className="G-main P-users">
        <Form
          layout="inline"
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="Username"
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" htmlType="submit" onClick={fetchUserList}>
              查询
            </Button>
          </Form.Item>
          <Form.Item label={null}>
            <Button type="primary" htmlType="submit" onClick={pushUserInfo}>
              添加
            </Button>
          </Form.Item>
        </Form>
        <Card>User页面</Card>
        <Table columns={columns} dataSource={data} loading={loading} />
      </section>
    </>
  )
}

export default User
